<template>
  <div>
    <mpvue-cropper ref="cropper"
                   :option="cropperOpt"
                   @ready="cropperReady"
                   @beforeDraw="cropperBeforeDraw"
                   @beforeImageLoad="cropperBeforeImageLoad"
                   @beforeLoad="cropperLoad"></mpvue-cropper>
    <div class="cropper-buttons"
         :style="{ color:cropperOpt.boundStyle.color}">
      <div class="upload btn"
           @tap="uploadTap">
        上传图片
      </div>
      <div class="getCropperImage btn"
           :style="{ backgroundColor: cropperOpt.boundStyle.color }"
           @tap="getCropperImage">
        生成图片
      </div>
    </div>
  </div>
</template>

<script>
import MpvueCropper from '@/components/mpvue-cropper'
var util = require('../../utils/index.js')

let wecropper

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

export default {
  data () {
    return {
      type: null,
      cropperOpt: {
        id: 'cropper',
        targetId: 'targetCropper',
        pixelRatio: device.pixelRatio,
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: (width - 200) / 2,
          y: (height - 355) / 2,
          width: 200,
          height: 355
        },
        boundStyle: {
          color: '#04b00f',
          mask: 'rgba(0,0,0,0.8)',
          lineWidth: 1
        }
      }
    }
  },

  components: {
    MpvueCropper
  },

  methods: {
    cropperReady (...args) {
      console.log('cropper ready!')
    },
    cropperBeforeImageLoad (...args) {
      console.log('before image load')
    },
    cropperLoad (...args) {
      console.log('image loaded')
    },
    cropperBeforeDraw (...args) {
      // Todo: 绘制水印等等
      console.log('水印')
    },
    uploadTap () {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          console.log(res)
          const src = res.tempFilePaths[0]
          wecropper.pushOrigin(src)
        }
      })
    },
    getCropperImage () {
      let that = this
      wx.showToast({
        title: '图片处理中...'
      })
      wecropper.getCropperImage({ original: true })
        .then((src) => {
          let filePath = src
          const name = Math.random() * 1000000
          const cloudPath = name + filePath.match(/\.[^.]+?$/)[0]
          wx.cloud.uploadFile({
            cloudPath, // 云存储图片名字
            filePath, // 临时路径
            success: function (res) {
              const db = wx.cloud.database()
              const imageList = db.collection('image_list')
              imageList.add({
                data: {
                  url: res.fileID,
                  type: that.type,
                  updated: util.formatTime(new Date())
                },
                success: function (res) {
                  wx.hideToast()
                  console.log('存储到云端成功：', res)
                  wx.switchTab({
                    url: '/pages/mine/main'
                  })
                }
              })
            },
            fail: function (res) {
              console.log('上传图片失败：', res)
            }
          })
        })
        .catch(e => {
          console.error('获取图片失败')
        })
    }
  },

  mounted () {
    wecropper = this.$refs.cropper
    this.type = this.$root.$mp.query.type
  }
}
</script>

<style>
.cropper-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #e5e5e5;
}

.cropper-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0 20rpx;
  box-sizing: border-box;
  line-height: 50px;
}

.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
  text-align: center;
}

.upload {
  background-color: chocolate;
}
.cropper {
  position: absolute;
  top: 0;
  left: 0;
}

.cropper-buttons {
  background-color: rgba(0, 0, 0, 0.95);
}

.btn {
  height: 30px;
  line-height: 30px;
  padding: 0 24rpx;
  border-radius: 2px;
  color: #ffffff;
}
</style>